<template>
    <div>
        <div v-if="propValue.tabIndex == 0">
            <div :class="propValue.HeadlineStyle == 2 ? 'toutiao' : '' ">{{propValue.name}}</div>
            <div :class="propValue.lineType == 2 ? 'twocolumns' : propValue.lineType == 3 ? 'threecolumns' : '' " v-html="propValue.content"></div>
        </div>
        <div v-else-if="propValue.tabIndex == 1" :class="propValue.lineType1 == 1 ? 'first1' : 'first12' ">
            <img class="bgimg" src="https://0.ss.faisys.com/image/default/0_thumb2.jpg" alt="">
            <div v-html="propValue.content"></div>
        </div>
        <div v-else-if="propValue.tabIndex == 2" :class="propValue.lineType2 == 1 ? 'first2' : 'first22' ">
            <img class="bgimg" src="https://0.ss.faisys.com/image/default/0_thumb2.jpg" alt="">
            <div v-html="propValue.content"></div>
        </div>
        <div v-else-if="propValue.tabIndex == 3" :class="propValue.lineType3 == 1 ? 'first3' : 'first32' ">
            <img class="bgimg" src="https://0.ss.faisys.com/image/default/0_thumb2.jpg" alt="">
            <div class="text" v-html="propValue.content"></div>
        </div>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        propValue: {
            type: Object,
            default: {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {

        };
    },
    methods: {

    },
};
</script>

<style lang="scss" scoped>
    // 背景图片
    .first0 {
        font-size: 30px;
    }

    .first1 {
        display: flex;
        .bgimg {
            width: 30%;
            height: 15%;
            margin-right: 10px;
        }
    }
    .first12 {
        width: 50%;
        display: flex;
        .bgimg {
            width: 30%;
            height: 15%;
            margin-right: 10px;
        }
    }

    .first2 {
        display: flex;
        flex-direction: column;
        .bgimg {
            width: 100%;
            height: 100px;
            // margin-right: 10px;
        }
    }
    .first22 {
        width: 50%;
        display: flex;
        flex-direction: column;
        .bgimg {
            width: 100%;
            height: 100px;
            // margin-right: 10px;
        }
    }

    .first3 {
        margin: 20px;
        .bgimg {
            width: 100px;
            // height: 80%;
            float: left;
            margin: 0 10px 10px 0;
        }
    }
    .first32 {
        width: 50%;
        margin: 20px;
        .bgimg {
            width: 100px;
            // height: 80%;
            float: left;
            margin: 0 10px 10px 0;
        }
    }

    .toutiao {
        font-size: 20px;
        color: #333;
        font-weight: 700;
        // font-size: 30px;
        // font-weight: bold;
    }
    .twocolumns {
        width: 50%;
    }
    .threecolumns {
        width: 33%;
    }
</style>
